<template>
  <n-modal v-model:show="showModal" preset="dialog" title="添加摄像头">
    <n-form ref="formRef"
            :model="form"
            :rules="rules"
            label-placement="left"
            label-width="auto"
    >
      <n-form-item label="名称">
        <n-input v-model:value="form.name" placeholder="请输入摄像头名称" />
      </n-form-item>
      <n-form-item label="分组">
        <n-select
          v-model:value="form.group"
          :options="groupOptions"
          placeholder="请选择分组"
        />
      </n-form-item>
      <n-form-item label="GPS信息">
        <n-input v-model:value="form.gps" placeholder="请输入GPS信息" />
      </n-form-item>
      <n-form-item label="设备类型">
        <n-checkbox v-model:checked="form.realtime">实时</n-checkbox>
      </n-form-item>
      <n-form-item label="品牌">
        <n-select
          v-model:value="form.brand"
          :options="brandOptions"
          placeholder="请选择品牌"
        />
      </n-form-item>
      <n-form-item label="原始流地址">
        <n-input v-model:value="form.streamUrl" placeholder="请输入流地址" />
        <n-button @click="generateStreamUrl" class="ml-2">一键生成</n-button>
      </n-form-item>
      <n-form-item label="预览图片">
        <n-upload
          v-model:file-list="form.previewFiles"
          list-type="image-card"
          :max="1"
        >
          点击上传
        </n-upload>
      </n-form-item>
    </n-form>
    <template #action>
      <n-button @click="handleSubmit" type="primary">确认添加</n-button>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import {AddDevice} from '@/api/analysis/device';

const message = useMessage();
const showModal = ref(false);
const groupOptions = ref<any[]>([]);

const form = ref({
  name: '',
  group: '',
  gps: '',
  status: "online",
  realtime: false,
  brand: '',
  rtsp_url: '',
  group_id: '',
  preview_image: '',
  previewFiles: []
});

async function handleSubmit() {
  try {
    if (!form.value.name || !form.value.group || !form.value.brand) {
      message.error('请填写完整信息');
      return;
    }

    await AddDevice({
      name: form.value.name,
      status: form.value.status,
      group_id: form.value.group,
      rtsp_url: form.value.rtsp_url,
      preview_image: form.value.preview_image || ''
    });
    message.success('摄像头添加成功');
    showModal.value = false;
    emit('success');
  } catch (error) {
    message.error('添加摄像头失败');
    console.error(error);
  }
}

const brandOptions = [
  { label: '海康', value: 'hikvision' },
  { label: '大华', value: 'dahua' },
  { label: '其他', value: 'other' }
];


const emit = defineEmits(['success']);


function generateStreamUrl() {

  if (!form.value.brand) {
    message.error('请先选择品牌');
    return;
  }

  const baseUrl = form.value.brand === 'hikvision'
    ? 'rtsp://hikvision.com/stream/'
    : form.value.brand === 'dahua'
      ? 'rtsp://dahua.com/stream/'
      : 'rtsp://other.com/stream/';
  form.value.rtsp_url = baseUrl + Date.now();
}

// 表单验证规则
const rules = {
  name: {
    required: true,
    message: '请输入设备名称',
    trigger: 'blur'
  },
  group: {
    required: true,
    message: '请选择分组',
    trigger: 'change'
  },
  brand: {
    required: true,
    message: '请选择品牌',
    trigger: 'change'
  },
  rtsp_url: {
    required: true,
    message: '请输入RTSP地址',
    trigger: 'blur',
    validator: (_, value) => value.startsWith('rtsp://')
  }
};


function resetForm() {
  form.value = {
    name: '',
    group: '',
    gps: '',
    status: "online",
    realtime: false,
    brand: '',
    rtsp_url: '',
    group_id: '',
    preview_image: '',
    previewFiles: []
  };
}


defineExpose({
  showModal: () => showModal.value = true,
  groupOptions,
});
</script>
